<template>
  <div class="eventpage">
    <div class="leftlist">
      <div
        class="leftitem first"
        v-for="(item, index) in leftList"
        :key="index"
      >
        <p class="itemititle">{{ item.field_name }}</p>
        <p
          :class="{
            finishpercent: item.field_name === '办结率',
            greennum: item.field_name === '办结率' && item.field_value < 0,
          }"
        >
          <b>{{ item.field_value }}</b
          >{{ item.unit }}
        </p>
      </div>
    </div>
    <div class="rightchart">
      <div class="charttitle">事件月度趋势</div>
      <div class="chartarea">
        <div class="mychart" ref="myChart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { postAction, getAction } from '@/api/manage.js'

export default {
  data() {
    return {
      myChart: null,
      leftList: [],
      chartData: []
    }
  },
  mounted() {
    this.getData()
    this.getChartData()
  },
  methods: {
    getChartData() {
      getAction('/topic/data/listAllBySql/dy_dp_shzl_sjyx_sjqs_month').then(
        (res) => {
          if (res.result) {
            this.chartData = res.result
            this.initChart()
          }
        }
      )
    },
    getData() {
      postAction('/topic/data/listAllData/dy_dp_shzl_sjyx_gk', {}).then(
        (res) => {
          if (res.result && res.result.data) {
            this.leftList = res.result.data
          }
        }
      )
    },
    initChart() {
      if (!this.myChart) {
        this.myChart = echarts.init(this.$refs.myChart)
      }
      let xAxisData = []
      let yAxisEventData = []
      let yAxisFinishData = []
      this.chartData.forEach((item) => {
        xAxisData.push(item.year)
        yAxisEventData.push(item.event_num)
        yAxisFinishData.push(item.deal_num)
      })
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          show: true,
          x: 'center', // 设置图例水平位置为居中
          y: 'top', // 设置图例垂直位置为底部
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          top: '30%',
          left: '15%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#e1e1e1'
              }
            },
            axisLabel: {
              interval: 0,
              margin: 10,
              textStyle: {
                fontSize: 12,
                color: '#e1e1e1'
              },
              rotate: '45'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：件',
            nameTextStyle: {
              // 轴标题，在xAxis或yAxis根下
              color: '#e1e1e1',
              fontSize: 12
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                fontSize: 12,
                color: '#e1e1e1'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            splitLine: {
              lineStyle: {
                type: 'solid',
                color: 'rgba(255,255,255,0.3)'
              }
            }
          }
        ],
        series: [
          {
            name: '事件量',
            type: 'line',
            stack: 'Total',
            lineStyle: {
              color: 'rgba(81, 172, 233, 1)', // 线的颜色
              width: 3, // 线的宽度
              type: 'solid' // 线的类型，默认为实线
            },
            // 折线图上点的样式
            symbol: 'circle', // 点的形状，可选值包括：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' 等
            symbolSize: 8, // 点的大小
            // 点的样式设置
            itemStyle: {
              color: 'rgba(81, 172, 233, 1)', // 点的颜色
              borderColor: '#fff', // 点的边框颜色
              borderWidth: 3 // 点的边框宽度
            },
            // smooth: true,
            // 开启区域背景渐变效果
            // areaStyle: {
            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 1, // 起点位置
            //       color: 'rgba(255,231,101,0.01)' // 起点颜色
            //     },
            //     {
            //       offset: 0, // 结束位置
            //       color: 'rgba(255,231,101,0.18)' // 结束颜色
            //     }
            //   ])
            // },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              textStyle: {
                fontsize: 16,
                color: '#FFDD00'
              },
              valueFormatter: function (value) {
                return value
              }
            },
            data: yAxisEventData
          },
          {
            name: '办结量',
            type: 'line',
            stack: 'Total',
            lineStyle: {
              color: 'rgba(85, 210, 151, 1)', // 线的颜色
              width: 3, // 线的宽度
              type: 'solid' // 线的类型，默认为实线
            },
            // 折线图上点的样式
            symbol: 'circle', // 点的形状，可选值包括：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' 等
            symbolSize: 8, // 点的大小
            // 点的样式设置
            itemStyle: {
              color: 'rgba(85, 210, 151, 1)', // 点的颜色
              borderColor: '#FFFFFF', // 点的边框颜色
              borderWidth: 3 // 点的边框宽度
            },
            // smooth: true,
            // 开启区域背景渐变效果
            // areaStyle: {
            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 1, // 起点位置
            //       color: 'rgba(255,231,101,0.01)' // 起点颜色
            //     },
            //     {
            //       offset: 0, // 结束位置
            //       color: 'rgba(255,231,101,0.18)' // 结束颜色
            //     }
            //   ])
            // },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              textStyle: {
                fontsize: 16,
                color: '#FFDD00'
              },
              valueFormatter: function (value) {
                return value
              }
            },
            data: yAxisFinishData
          }
        ]
      }
      this.myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.eventpage {
  width: 100%;
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  position: relative;

  .leftlist {
    width: 126px;
    margin-right: 10px;
    .leftitem {
      width: 100%;
      height: 73px;
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: url("../../images/netbg1.png") no-repeat center;
      background-size: 100% 100%;
      &:last-child {
        height: 57px;
        margin-bottom: 0;
        background: url("../../images/netbg2.png") no-repeat center;
        background-size: 100% 100%;
      }
      p {
        font-family: MicrosoftYaHei;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin-bottom: 0px;
        &.itemititle {
          margin-bottom: 5px;
        }
        b {
          font-family: MicrosoftYaHei, MicrosoftYaHei;
          font-weight: bold;
          font-size: 20px;
          color: #ffde00;
          line-height: 0px;
          text-align: right;
          font-style: normal;
          text-transform: none;
        }
        &.finishpercent {
          color: #ff3e3e;
          b {
            color: #ff3e3e;
            padding-left: 10px;
            box-sizing: border-box;
            position: relative;
            &::before {
              content: "";
              width: 8px;
              height: 12px;
              background: url("../../images/up-arrow.png") no-repeat;
              background-size: 100% 100%;
              position: absolute;
              left: 0;
              top: 50%;
              margin-top: -4px;
            }
          }
        }
        &.greennum {
          color: #18c624;
          b {
            color: #18c624;
            padding-left: 10px;
            box-sizing: border-box;
            position: relative;
            &::before {
              content: "";
              width: 8px;
              height: 12px;
              background: url("../../images/down-arrow.png") no-repeat;
              background-size: 100% 100%;
              position: absolute;
              left: 0;
              top: 50%;
              margin-top: -4px;
            }
          }
        }
      }
    }
  }
  .rightchart {
    width: 285px;
    .charttitle {
      width: 285px;
      height: 29px;
      font-family: MicrosoftYaHei;
      font-size: 16px;
      color: #ffffff;
      line-height: 29px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      padding: 0 15px;
      box-sizing: border-box;
      background: url("../../images/titlebg.png") no-repeat center;
      background-size: 100% 100%;
    }
    .chartarea {
      width: 100%;
      height: 200px;
      margin-top: 10px;
      .mychart {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
